import { useLocation, useNavigate } from 'react-router-dom';

/**
 * Components
 */
import Canvas from '@/components/canvas';

const PagePreview: React.FC = () => {
    /**
     * Hooks
     */
    const { state } = useLocation();

    const navigate = useNavigate();

    return (
        <div className="jj-page">
            <main className="jj-main">
                <div
                    style={{
                        margin: '18px 0 26px',
                        color: '#000',
                        fontSize: '17px',
                        lineHeight: '24px',
                        textAlign: 'center',
                    }}
                >
                    来自 {state?.name || '佚名'} 的作品
                </div>

                <Canvas colors={state?.colors || []} style={{ width: '100%' }} />
            </main>

            <footer className="jj-footer jj-footer-column">
                <div
                    className="jj-collect"
                    onClick={() => {
                        JeeWeb.get('share', ({ result }) => {
                            const list = result || [];

                            list.push(state);

                            JeeWeb.shareInfo = null;

                            JeeWeb.set('share', list, () => {
                                navigate('/share');
                            });
                        });
                    }}
                />

                <div
                    style={{
                        marginTop: '16px',
                        fontSize: '15px',
                        textAlign: 'center',
                        lineHeight: '17px',
                    }}
                    onClick={() => {
                        JeeWeb.shareInfo = null;

                        navigate('/');
                    }}
                >
                    进入应用
                </div>
            </footer>
        </div>
    );
};

export default PagePreview;
